<template>
    <!-- 登录切换 -->
    <div class="userChange">
        <a-tabs v-model="loginType" @change="loginTab">
            <a-tab-pane tab="帐号登录" key="1"></a-tab-pane>
            <a-tab-pane tab="手机验证码登录" key="2"></a-tab-pane>
        </a-tabs> 
        <a-form :form="form" @submit="handleSubmit">
            <a-form-item v-if="loginType==1">
                  <a-input
                    v-decorator="[
                      'username',
                      { rules: [{ required: true, message: '登录名不能为空！' }] }
                    ]"
                    placeholder="请输入登录名"
                  >
                    <a-icon
                      slot="prefix"
                      type="user"
                      style="color: rgba(0,0,0,.25)"
                    />
                  </a-input>
            </a-form-item>
            <a-form-item v-if="loginType==1">
              <a-input
                v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '密码不能为空' }] }
                ]"
                type="password"
                placeholder="请输入密码"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color: rgba(0,0,0,.25)"
                />
              </a-input>
            </a-form-item>
            <a-form-item v-if="loginType==2">
                  <a-input
                    v-decorator="[
                      'mobile',
                      { rules: [{ required: true, message: '手机号不能为空！' }] }
                    ]"
                    type="tel"
                    maxLength="11"
                    placeholder="请输入手机号"
                  >
                    <a-icon
                      slot="prefix"
                      type="phone"
                      style="color: rgba(0,0,0,.25)"
                    />
                  </a-input>
            </a-form-item>
            <a-form-item v-if="loginType==2">
                  <a-input
                    v-decorator="[
                      'code',
                      { rules: [{ required: true, message: '验证码不能为空！' }] }
                    ]"
                    placeholder="请输入验证码"
                    style="width: 220px;"
                  >
                    <a-icon
                      slot="prefix"
                      type="lock"
                      style="color: rgba(0,0,0,.25)"
                    />
                  </a-input>
                  <a-button class="ant-btn-code" @click="SmsMsgSend">{{smsCodeText}}{{smsCodeText=='获取验证码'?'':'S'}}</a-button>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit" block>登 录 </a-button>
            </a-form-item>
        </a-form>
        <a-row :span="24" class="forget">
            <a-col :span="14">
                <nuxt-link to="/login/forget"> 忘记密码</nuxt-link>
                <!-- <a href="javascript:;" class="forgotPsw">
                忘记密码</a> -->
            </a-col>
            <a-col :span='10'>没有账号,
                  <nuxt-link to="/register" class='regist'>立即注册</nuxt-link>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    
    export default {
        data: () => ({
            disabledBool: true,
            useruame: '',
            passowrd: '',
            //验证码对象
            captchaObjDom: '',
            loginType: '1',
            // 短信验证码
            smsCodeText: '获取验证码',
            smsInterval: null,
            smsCode: ''
        }),
        props: {
            // activeIndex: {type: String, default: '0'},
          backFlag: {type: Boolean, default: false}
        },
        computed: {
            // setPosition: function () {
            //     if (this.headerPosition) {
            //         return {position: 'static'};
            //     }
            // },

            // visible () { return this.$store.state.loginDialogVisible } 
        },
        beforeCreate() {
            this.form = this.$form.createForm(this);
        },
        created () {
          // console.log('router backFlag:',this.backFlag)
        },
        canActivate (transition) {
          console.log('transiton:',transition)
        },
        // beforeRouteEnter(to, from, next) {
        //   // next(vm=>{          //  这里的vm指的就是vue实例，可以用来当做this使用
        //       console.log('beforeRouteEnter22::',to,from,next)
        //   // })
        // },
        methods: {
            // 获取短信验证码
            async SmsMsgSend () {
              if (this.smsCodeText != '获取验证码') return;
              let mobile = this.form.getFieldValue('mobile')
              if (!mobile) {
                this.$message.error('手机号格式不正确')
                return;
              }
              if (mobile.length != 11) {
                this.$message.error('手机号格式不正确')
                return;
              }
              if (this.smsCodeText == '获取验证码') {
                this.smsCodeText = 60;
                this.smsInterval = setInterval(()=>{
                  this.smsCodeText = this.smsCodeText -1
                  if (this.smsCodeText == 0) {
                    
                    this.smsCodeText = '获取验证码'
                    clearInterval(this.smsInterval);
                    this.smsInterval = null
                  }
                },1000)
              }
                const res = await this.$store.dispatch('SmsMsgSend', {
                  mobile: mobile,
                  type: 'login'
                })
                if (res.code === '0000') {
                    this.$message.success('短信验证码已发送！');
                    this.smsCode = res.data;
                }else{
                  this.$message.error(res.message);
                }
            },
            // 登录类型切换
            loginTab (key) {
                this.loginType = key;
            },
            // 输入框验证是否都已输入
            inputValue () {
                if (this.useruame !=='' && this.password !=='' && this.disabledBool){
                    this.disabledBool = false
                }
            },
            // 隐藏登录框
            hideLogin() {
                this.$store.commit('HANDLE_LOGIN', false)
            },
            // 登录点击
            handleSubmit (e) {
                e.preventDefault();
                this.form.validateFieldsAndScroll((err, values) => {
                 if(!err) {
                    if (this.loginType == 1) this.userLogin(values);
                    if (this.loginType == 2) this.loginMobile(values);
                 }
                });
            },
            enterpriseSubmit () {

            },
            // 手机号登录
            async loginMobile (user) {
                try {
                    user.smsCode = this.smsCode;
                    const res = await this.$store.dispatch('loginMobile', user)
                    // window.location = window.location.href
                    this.loginGoto();
                } catch (err) {
                    // this.$notification['error']({message: '用户名或密码错误'})
                    this.$message.error('用户名或密码错误');
                    // if (err.code === 415) {
                    //     window.location.href = err.data.back
                    // }
                }
            },
            // 帐号登录
            async userLogin (user) {
                try {
                    const res = await this.$store.dispatch('login', user)
                    // window.location = window.location.href
                    this.loginGoto();
                } catch (err) {
                    // this.$notification['error']({message: '用户名或密码错误'})
                    this.$message.error('用户名或密码错误');
                    // if (err.code === 415) {
                    //     window.location.href = err.data.back
                    // }
                }
            },
            // 登录成功后跳转
            loginGoto(){
              // console.log('this.backFlag::',this.backFlag)
              if (this.backFlag){
                this.$router.push('/')
                // this.$router.go('-1')
              }else{
                this.$router.push('/')
              }
            },
            keyenter(){
                this.handleConfirm()
            }
        }
    }
</script>
<style lang="scss">
@import "./../../assets/css/login.scss";
</style>
